<template>
  <div style="height: 100%;">
    <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:100%" @click="getClickInfo" :scroll-wheel-zoom='true'>
    </baidu-map>
  </div>
</template>

<script>
  export default {
    name: 'stationMap',
    data () {
      return {
        center: {lng: 111.006854, lat: 35.038859},
        zoom: 9,
        cityCode: '328'
      }
    },
    methods: {
      handler ({BMap, map}) {
        this.stationData(BMap,map);
      },
      getClickInfo (e) {
        // this.center.lng = e.point.lng
        // this.center.lat = e.point.lat
      },
      stationData(BMap,map){
        let _this = this;
        map.centerAndZoom('运城市', _this.zoom);
      },
      control(BMap,map,list){
        let _this = this;
        //定义一个控件类
        function ZoomControl() {
          this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
          this.defaultOffset = new BMap.Size(20, 20)
        }
        //通过JavaScript的prototype属性继承于BMap.Control
        ZoomControl.prototype = new BMap.Control();

        //自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
        //在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
        ZoomControl.prototype.initialize = function(map) {
          //创建一个dom元素
          let div = document.createElement('div');
          //添加文字说明
          let zs = document.createElement('div');
          zs.style.height = "20px";
          zs.style.lineHeight = "20px";
          let zsImg = document.createElement('img');
          zsImg.src = "/static/imgs/zhishou.png";
          zs.appendChild(zsImg);
          let zsText = document.createElement('zsText');
          zsText.style.cssFloat = 'right';
          zsText.innerText = "无人值守站";
          zs.appendChild(zsText);
          let cx = document.createElement('div');
          cx.style.height = "20px";
          cx.style.lineHeight = "20px";
          let cxImg = document.createElement('img');
          cxImg.src = "/static/imgs/jiance.png";
          cx.appendChild(cxImg);
          let cxText = document.createElement('cxText');
          cxText.style.cssFloat = 'right';
          cxText.innerText = "超限检测站";
          cx.appendChild(cxText);
          let yt = document.createElement('div');
          yt.style.height = "20px";
          yt.style.lineHeight = "20px";
          let ytImg = document.createElement('img');
          ytImg.src = "/static/imgs/qiye.png";
          yt.appendChild(ytImg);
          let ytText = document.createElement('ytText');
          ytText.style.cssFloat = 'right';
          ytText.innerText = "源头企业站";
          yt.appendChild(ytText);
          div.appendChild(zs);
          div.appendChild(cx);
          div.appendChild(yt);

          // 设置样式
          div.style.cursor = "pointer";
          div.style.padding = "7px 10px";
          div.style.boxShadow = "0 2px 6px 0 rgba(27, 142, 236, 0.5)";
          div.style.borderRadius = "5px";
          div.style.opacity = "1";
          // div.style.backgroundColor = "";
          // 绑定事件,点击一次放大两级
          div.onclick = function(e){

          };
          // 添加DOM元素到地图中
          map.getContainer().appendChild(div);
          // 将DOM元素返回
          return div;
        };
        //创建控件元素
        let myZoomCtrl = new ZoomControl();
        //添加到地图中
        map.addControl(myZoomCtrl);
      },
      stationControl(BMap,map,list){
        let _this = this;
        //定义一个控件类
        function ZoomControl() {
          this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
          this.defaultOffset = new BMap.Size(20, 20)
        }
        //通过JavaScript的prototype属性继承于BMap.Control
        ZoomControl.prototype = new BMap.Control();

        //自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
        //在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
        ZoomControl.prototype.initialize = function(map) {
          //创建一个dom元素
          let div = document.createElement('div');
          //添加文字说明
          // div.appendChild(document.createTextNode('收费站'));
          let select = document.createElement('div');
          for(let i=0;i<list.length;i++){
            const station = list[i];
            let selectOpion = document.createElement('div');
            selectOpion.appendChild(document.createTextNode(station.deptname));
            select.appendChild(selectOpion);
            selectOpion.style.borderBottom = "1px dashed #eee";
            selectOpion.style.width = "100px";
            selectOpion.style.height = "30px";
            selectOpion.style.lineHeight = "30px";
            selectOpion.style.display = "inline-block";
            selectOpion.onclick = function(e){
              if(station && station.lng && station.lat) {
                _this.center.lng = station.lng;
                _this.center.lat = station.lat;
              }
            };
          }
          div.appendChild(select);
          select.style.width = "200px";
          // 设置样式
          div.style.cursor = "pointer";
          div.style.padding = "7px 10px";
          div.style.boxShadow = "0 2px 6px 0 rgba(27, 142, 236, 0.5)";
          div.style.borderRadius = "5px";
          div.style.opacity = "1";
          div.style.height = '100%';
          // div.style.backgroundColor = "";
          // 绑定事件,点击一次放大两级
          div.onclick = function(e){

          };
          // 添加DOM元素到地图中
          map.getContainer().appendChild(div);
          // 将DOM元素返回
          return div;
        };
        //创建控件元素
        let myZoomCtrl = new ZoomControl();
        //添加到地图中
        map.addControl(myZoomCtrl);
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
